<template>
    <div class="subpage help-container">
        <ul class="help-box">
            <li @click="jumpView('problems')">
                <img src="@/assets/img/help_icon1.png" alt="">
                <div class="help-box-right">
                    <p>常见问题</p>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
            <li @click="jumpView('contact')">
                <img src="@/assets/img/help_icon2.png" alt="">
                <div class="help-box-right">
                    <p>联系客服</p>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
            <li @click="jumpView('feedback')">
                <img src="@/assets/img/help_icon3.png" alt="">
                <div class="help-box-right">
                    <p>意见反馈</p>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
        </ul>
        <div class="copyright-text">
            <p>Copyright &copy; 2019</p>
            <p>友牧农场umfarm.com版权所有</p>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        jumpView(viewName) {
            this.$router.push({name: viewName});
        }
    }
}
</script>

<style lang="scss" scoped>
    .help-container {
        .help-box {
            width: 100%;
            padding: 0 16px;
            box-sizing: border-box;
            background-color: #fff;
            li {
                width: 100%;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                img {
                    position: relative;
                    top: -1px;
                    width: 30px;
                    height: 30px;
                    object-fit: cover;
                    margin-right: 16px;
                }
                .help-box-right {
                    padding: 18px 0;
                    box-sizing: border-box;
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #344047;
                    border-bottom: 1px solid #f2f2f2;
                    p {
                        font-size: 16px;
                    }
                }
            }
            li:last-child {
                .help-box-right {
                    border-bottom: none;
                }
            }
        }
        .copyright-text {
            position: absolute;
            bottom: 48px;
            left: 0;
            z-index: 1;
            width: 100%;
            text-align: center;
            color: #969C9E;
            font-size: 12px;
        }
    }
</style>